<template>
  <div>
    <Card dis-hover :bordered="false">
      <Button
        v-hasC="{
          name: 'rbac-competency-agency-create',
          flag: 'v1/rbac/competency/agency-create',
        }"
        type="primary"
        @click="handleEdit((modalTit = true))"
        >新增</Button
      >
      <Row :gutter="40">
        <Col span="6">
          <List class="ivu-mt">
            <ListItem
              v-for="(item, index) in leftList"
              :key="item.id"
              style="cursor: pointer;"
              :class="initIndex === item.id ? 'active' : null"
            >
              <div
                style="width: 300px;padding-left: 20px;box-sizing: border-box;"
                @click="changeIndex(item, index)"
              >
                {{ item.competency_name }}
              </div>
              <template slot="action">
                <li>
                  <a
                    v-hasC="{
                      name: 'rbac-competency-agency-update',
                      flag: 'v1/rbac/competency/agency-update',
                    }"
                    :class="initIndex === item.id ? 'active' : null"
                    @click="handleEdit((modalTit = false), item)"
                    >编辑</a
                  >
                </li>
                <li>
                  <a
                    v-hasC="{
                      name: 'rbac-competency-agency-delete',
                      flag: 'v1/rbac/competency/agency-delete',
                    }"
                    :class="initIndex === item.id ? 'active' : null"
                    @click="handleDelete(item)"
                    >删除</a
                  >
                </li>
              </template>
            </ListItem>
          </List>
        </Col>
        <Col span="18" >
          <h4 class="ivu-mt-16">{{ isEdit.competency_name }}</h4>
          <p>描述：{{ isEdit.desc }}</p>
          <Divider class="ivu-mb"></Divider>
          <div class="ivu-title">数据权限</div>
          <p>请设置该角色的数据权限（包括：读取、修改、删除、转移)</p>
          <Form v-if="isShow" class="ivu-mt-16">
            <FormItem>
              <RadioGroup v-model="choosePow" vertical>
                <Radio
                  v-for="(item, index) in data_permission"
                  :label="item.value"
                  :key="index"
                  >{{ item.title }}</Radio
                >
              </RadioGroup>
            </FormItem>
            <Button
              v-hasC="{
                name: 'rbac-competency-agency-permission',
                flag: 'v1/rbac/competency/agency-permission',
              }"
              type="primary"
              @click="submitPow"
              :loading="remarksloading"
              >保存</Button
            >
          </Form>
        </Col>
      </Row>
    </Card>
    <Modal :title="modalTit ? '新增' : '编辑'" v-model="addEditModal">
      <Form
        :model="formParams"
        :rules="ruleValidate"
        ref="form"
        :label-width="80"
        :mask-closable="false"
      >
        <FormItem label="名称：" prop="name">
          <Input placeholder="请输入名称" v-model="formParams.name" />
        </FormItem>
        <FormItem label="描述：">
          <Input
            type="textarea"
            placeholder="请输入描述"
            v-model="formParams.desc"
          />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="addEditModal = false">取消</Button>
        <Button type="primary" :loading="remarksloading" @click="handler">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  getAgencyList,
  addAgencyList,
  editAgencyList,
  deleteAgencyList,
  getCompetencyInfo,
  editAgencyPer,
} from "@/api/TApi/index.js";
export default {
  data() {
    return {
      //
      data_permission: [],
      remarksloading: false,
      leftList: [],
      initIndex: "",
      formParams: {
        name: "",
        desc: "",
      },
      isShow: false,
      ruleValidate: {
        name: {
          required: true,
          message: "请输入名称",
          trigger: "blur",
        },
      },
      isEdit: {},
      //
      addEditModal: false,
      modalTit: true,
      choosePow: "",
    };
  },
  mounted() {
    this._getAgencyList();
    this._getCompetencyInfo();
  },

  methods: {
    //   点击确定
    handler() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.remarksloading = true
          let title = "";
          let func;
          let params = {
            competency_name: this.formParams.name,
            desc: this.formParams.desc,
          };
          switch (this.modalTit) {
            case true:
              {
                title = "新增";
                func = addAgencyList;
              }
              break;
            case false:
              {
                title = "编辑";
                params.id = this.isEdit.id;
                func = editAgencyList;
              }
              break;
          }
          func(params).then((res) => {
            this.$Message.success(`${title}成功`);
            this.addEditModal = false;
            this._getAgencyList();
            setTimeout(()=>{
              this.remarksloading = false
            },500)
          }).catch(()=>{
            this.remarksloading = false
          });
        }
      });
    },
    //   初始化职能列表
    _getAgencyList() {
      getAgencyList().then((res) => {
        if (res.length) {
          this.leftList = res;
          this.isShow = true;
          this.initIndex = res[0].id;
          this.isEdit = res[0];
          this.choosePow = Number(res[0].data_permission_id);
        } else {
          this.leftList = [];
          this.isEdit = {};
          this.isShow = false;
        }
      });
    },
    // 初始化下拉信息
    _getCompetencyInfo() {
      getCompetencyInfo().then((res) => {
        this.data_permission = res.data_permission;
      });
    },
    handleEdit(type, item) {
      this.$refs.form.resetFields();
      this.formParams.desc = "";
      switch (type) {
        case true:
          {
          }
          break;
        case false:
          {
            this.isEdit = item;
            this.choosePow = Number(item.data_permission_id);
            this.initIndex = item.id;
            this.formParams.name = item.competency_name;
            this.formParams.desc = item.desc;
          }
          break;
      }
      this.addEditModal = true;
    },
    handleDelete(item) {
      this.isEdit = item;
      this.choosePow = Number(item.data_permission_id);
      this.initIndex = item.id;
      this.$Modal.confirm({
        title: "操作提示",
        content: "确认删除该职能",
        onOk: () => {
          deleteAgencyList({
            id: item.id,
          }).then((res) => {
            this.$Message.success("操作成功");
            this._getAgencyList();
          });
        },
      });
    },
    changeIndex(item, index) {
      this.isEdit = item;
      this.choosePow = Number(item.data_permission_id);
      this.initIndex = item.id;
    },
    submitPow() {
      if (!this.choosePow) {
        this.$Message.warning("请至少选择一项权限做分配");
        return false;
      }
      let params = {
        id: this.initIndex,
        permission_id: this.choosePow,
      };
      this.remarksloading = true
		setTimeout(()=>{
			this.remarksloading = false
		},1000)
      editAgencyPer(params).then((res) => {
        this.$Message.success("设置成功");
        this._getAgencyList();
      });
    },
  },
};
</script>
<style scoped lang="less">
.ivu-title {
  font-weight: bold;
  line-height: 36px;
}
/deep/.ivu-list-item-action {
  margin-left: 0 !important;
}
/deep/.ivu-list-item {
  justify-content: space-between !important;
}
.active {
  background-color: #55b6ec;
  color: white;
}
</style>
